<template>
  <div class="chat-panel">
    <div class="chat-panel-header">
      <div class="limits-wrapper">
        <div class="limit-item">
          <img src="~@/assets/new-chat-message.svg" alt="" class="svg-icon message">
          {{ chatLimit.messagesLeft || 0 }}
        </div>
        <div class="line"></div>
        <div class="limit-item">
          <img src="~@/assets/new-chat-mail.svg" alt="" class="svg-icon mail">
          {{ chatLimit.lettersLeft || 0 }}
        </div>
      </div>
      <div class="identity-wrapper">
        <div class="identity">
          <div class="user-info">
            <el-image @click="handleOpenUserInfoDialog('customer')" class="user-avatar" :src="customerDetail.photo" alt="" />
            <div class="user-profile">
              <div class="user-name">{{ customerDetail.name }}</div>
              <div class="user-id">{{ customerId }}</div>
            </div>
          </div>
          <img class="svg-icon height_24px" src="~@/assets/notes.svg" alt="" @click="handleOpenNoteDialog">
        </div>
        <div class="identity">
          <div class="user-info">
            <el-image @click="handleOpenUserInfoDialog('profile')" class="user-avatar" :src="profileDetail.photo" alt="" />
            <div class="user-profile">
              <div class="user-name">{{ profileDetail.name }}</div>
              <div class="user-id">{{ profileId }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tool-wrapper">
        <div class="tool-item"></div>
      </div>
      <div class="dots">
      </div>
    </div>
    <div v-if="type === 'CHAT'" class="chat-panel-body chat"
         v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0)"
    >
      <div :class="['chat-message-item', item.source === 'CUSTOMER' ?  'customer' : 'profile']" v-for="(item,index) in messageList" :key="index">
        <div class="message-wrapper">
          <div class="avatar-box">
            <el-image :src=" item.source === 'CUSTOMER' ? customerDetail.photo : profileDetail.photo" alt="" />
          </div>
          <div class="message-right">
            <div class="message-content">
              <div v-if="item.type === enumType.MESSAGE" class="text-message" >{{ item.content.message }}</div>
              <div v-if="item.type === enumType.STICKER" class="sticker">
                <img :src="item.content.url" alt="">
              </div>
              <div v-if="item.type === enumType.PHOTO_BATCH" class="photo-batch">
                <el-image
                    style="height: 8.92rem;border-radius: 0.36rem;"
                    v-for="photo in item.content.photos"
                    :key="photo.id"
                    :src="photo.urlThumbnail"
                    :preview-src-list="item.content.photos.map(el => el.urlThumbnail)"
                ></el-image>
              </div>
            </div>
            <div class="message-time">{{ item.createdDate | formatDate}}</div>
          </div>
        </div>
      </div>
    </div>
    <div
        v-if="type === 'MAIL'" class="chat-panel-body mail"
         v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0)">
      <div :class="['chat-message-item', item.contentSource === 'CUSTOMER' ?  'customer' : 'profile']" v-for="(item,index) in mailMessageList" :key="index">
        <div class="message-wrapper">
          <div class="avatar-box">
            <el-image :src=" item.contentSource === 'CUSTOMER' ? customerDetail.photo : profileDetail.photo" alt="" />
            <div class="mail-message-time">
              {{ item.createdDate | formatDate}}
            </div>
          </div>
          <div class="mail-right">
            <div class="mail-name">
              {{ item.contentSource === 'CUSTOMER' ? customerDetail.name : profileDetail.name }}
            </div>
            <div class="mail-content" v-html="item.content"></div>
            <div class="mail-file-total" v-if="item.fileNum" @click="item.fileShow = !item.fileShow">
              <span>
                {{ item.fileNum }} Files Attached
              </span>
            </div>
            <div class="mail-file-list" v-if="item.fileShow">
              <div :class="['mail-files photo']" v-for="(imageItem,index) in item.attachments.images" :key="imageItem.id">
                <el-image
                    fit="cover"
                    style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                    :src="imageItem.urlThumbnail">
                </el-image>
                <div class="preview-btn" @click="openViewerForMailContent(index,item)">
                  {{ $t("preview") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-panel-footer" v-if="type === 'CHAT'">
      <div class="footer-input-wrapper">
        <div class="picker-stick-list">
          <el-popover
              popper-class="message-emojis-popover"
              placement="top">
            <div class="message-emojis-list">
              <div class="emojis-item"
                   @click="handleClickEmoji(emojisItem.emoji)"
                   v-for="emojisItem in emojisList">{{ emojisItem.emoji }}</div>
            </div>
            <div class="emoji-icon" slot="reference">
              <img class="img emoji-popup svg-icon height_30px" src="~@/assets/emoji.svg" alt="">
              <img class="img_hover emoji-popup svg-icon height_30px" src="~@/assets/emoji_active.svg" alt="">
            </div>
          </el-popover>
          <el-popover
              popper-class="message-sticker-popover"
              placement="top">
            <div class="message-sticker-list">
              <div class="sticker-item"
                   @click="handleClickSticker(stickerItem)"
                   v-for="stickerItem in stickerList" :key="stickerItem.id">
                <el-image :src="stickerItem.url" alt="">
                  <div slot="placeholder" class="image-slot">
                    loading<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
            <div class="emoji-icon" slot="reference">
              <img class="img emoji-popup svg-icon height_30px" src="~@/assets/sticker.svg" alt="">
              <img class="img_hover emoji-popup svg-icon height_30px" src="~@/assets/sticker_active.svg" alt="">
            </div>
          </el-popover>
        </div>
        <el-input class="chat-input"
                  type="textarea"
                  v-model="msgInputValue"
                  show-word-limit
                  maxlength="300"
                  placeholder="Type something"></el-input>
      </div>
      <div class="footer-buttons">
        <div :class="['icon-button', msgInputValue.trim() ? '' : 'disabled']"
          @click="handleSendMessage">
          <img src="~@/assets/send_correspondence.svg" class="svg-icon height_16px" alt="">
          Send Chat
        </div>
        <div
            :class="['icon-button border']"
            @click="handleOpenFileDialog"
        >
          <img src="~@/assets/attach_file.svg" class="svg-icon height_16px" alt="">
          Attach File
        </div>
        <div
            :class="['icon-button']" style="margin-top: auto;"
            @click="handleOpenChatMail"
        >
          <img src="~@/assets/send_mail.svg" class="svg-icon height_16px" alt="">
          Send Mail
        </div>
      </div>
    </div>
    <div class="chat-panel-footer" v-if="type === 'MAIL'">
      <div class="footer-input-wrapper">
        <div class="picker-stick-list">
          <el-popover
              popper-class="message-emojis-popover"
              placement="top">
            <div class="message-emojis-list">
              <div class="emojis-item"
                   @click="handleClickEmoji(emojisItem.emoji)"
                   v-for="emojisItem in emojisList">{{ emojisItem.emoji }}</div>
            </div>
            <div class="emoji-icon" slot="reference">
              <img class="img emoji-popup svg-icon height_30px" src="~@/assets/emoji.svg" alt="">
              <img class="img_hover emoji-popup svg-icon height_30px" src="~@/assets/emoji_active.svg" alt="">
            </div>
          </el-popover>
        </div>
        <el-input class="chat-input"
                  type="textarea"
                  v-model="msgInputValue"
                  show-word-limit
                  maxlength="3500"
                  placeholder="Type something"></el-input>
      </div>

      <div class="footer-buttons">
        <div
            :class="['icon-button', msgInputValue.trim().length >= 150 ? '' : 'disabled']"
            @click="handleSendMail">
          <img src="~@/assets/send_correspondence.svg" class="svg-icon height_16px" alt="">
          Send Mail
        </div>
        <div :class="[checkedFileNum ? 'icon-button active' : 'icon-button border']" @click="handleOpenFileDialogForMail">
          <img src="~@/assets/attach_file.svg" class="svg-icon height_16px" alt="">
          {{ mailFileText }}
        </div>
        <div :class="['icon-button', msgInputValue.trim() ? '' : 'disabled']" style="margin-top: auto;" @click="handleSendMessage">
          <img src="~@/assets/send_chat.svg" class="svg-icon height_16px" alt="">
          Send Chat
        </div>
      </div>
    </div>
    <div class="image-list">
      <div class="image-item" v-for="item in checkedImageList">
        <el-image
            fit="cover"
            style="width: 100%;border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
            :src="item.urlThumbnail">
        </el-image>
      </div>
    </div>
    <!--  消息发送文件  -->
    <el-dialog
        top="10vh"
        class="file-dialog"
        :visible.sync="fileDialog"
        width="70%">
      <div class="dialog-header">
        <div class="dialog-header-left">
          <div class="profile-info">
            <img :src="profileDetail.photo" alt="">
            <div class="profile-name">{{ profileDetail.name }}</div>
          </div>
          <div class="profile-name">Media Gallery</div>
        </div>
        <div class="dialog-header-right">
          <div class="box">
            <img src="~@/assets/help_light_blue.svg" class="svg-icon height_24px" alt="">
          </div>
          <UploadFile @success="handleUploadSuccess('chat')">
            <div class="box" style="width: 8.571rem;">
              Load
            </div>
          </UploadFile>
          <div v-show="fileTabActive !== 'sent'" class="box" @click="handleMarkSendMsg" style="width: min(calc(144 / 14 * 1rem),7.5vw)">
            Mark as Send
          </div>
          <div v-show="fileTabActive === 'sent'" class="box" @click="handleRecover" style="width: min(calc(144 / 14 * 1rem),7.5vw)">
            Recover
          </div>
          <div class="dialog-send-btn" @click="handleSendFile">
            Send {{ checkedFileNum }}
          </div>
        </div>
      </div>
      <el-tabs class="file-tab" v-model="fileTabActive">
        <el-tab-pane label="" name="Photo">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Photo')}} {{ fileList.photo.length}}</span>
          </span>
          <div class="file-tab-content photo">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.photo" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Video">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Video')}} {{ fileList.video.length }}</span>
          </span>
          <div class="file-tab-content video">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.video" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('video', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
              <img @click="openVideo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Audio">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/video_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Audio')}} {{ fileList.audio.length }}</span>
          </span>
          <div class="file-tab-content audio">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.photo" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Sent">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/sent_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Sent')}} ({{fileList.sent.length}})</span>
          </span>
          <div class="file-tab-content sent">
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.PHOTO).length"
            >Photo</div>
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.sent.filter(el => el.mediaType === enumType.PHOTO)" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.VIDEO).length"
            >Video</div>
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.video.filter(el => el.mediaType === enumType.VIDEO)" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('video', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
              <img @click="openVideo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
            </div>
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.AUDIO).length"
            >Audio</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Moderation">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/gear.svg" alt="">
            <span class="file-tab-name">{{$t('Moderation')}} ({{fileList.moderation.length}})</span>
          </span>
          <div class="file-tab-content moderation"></div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!--  邮件发送文件  -->
    <el-dialog
        top="10vh"
        class="file-dialog"
        :visible.sync="mailFileDialog"
        width="70%">
      <div class="dialog-header">
        <div class="dialog-header-left">
          <div class="profile-info">
            <img :src="profileDetail.photo" alt="">
            <div class="profile-name">{{ profileDetail.name }}</div>
          </div>
          <div class="profile-name">Media Gallery</div>
        </div>
        <div class="dialog-header-right">
          <div class="box">
            <img src="~@/assets/help_light_blue.svg" class="svg-icon height_24px" alt="">
          </div>
          <UploadFile @success="handleUploadSuccess('mail')">
            <div class="box" style="width: 8.571rem;">
              Load
            </div>
          </UploadFile>
          <div class="box" @click="handleMarkSendMail" style="width: min(calc(144 / 14 * 1rem),7.5vw)">
            Mark as Send
          </div>
          <div class="dialog-send-btn" @click="handleAttachedFile">
            Attached {{ checkedFileNum }}
          </div>
        </div>
      </div>
      <el-tabs class="file-tab" v-model="fileTabActive">
        <el-tab-pane label="" name="Photo">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Photo')}} {{ fileList.photo.length}}</span>
          </span>
          <div class="file-tab-content photo">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.photo" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Video">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Video')}} {{ fileList.video.length }}</span>
          </span>
          <div class="file-tab-content video">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.video" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('video', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
              <img @click="openVideo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Sent">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/sent_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Sent')}} ({{fileList.sent.length}})</span>
          </span>
          <div class="file-tab-content sent">
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.PHOTO).length"
            >Photo</div>
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.sent.filter(el => el.mediaType === enumType.PHOTO)" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.VIDEO).length"
            >Video</div>
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.video.filter(el => el.mediaType === enumType.VIDEO)" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('video', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
              <img @click="openVideo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
            </div>
            <div class="mediaType"
                 v-if="fileList.video.filter(el => el.mediaType === enumType.AUDIO).length"
            >Audio</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <image-viewer :z-index="999999" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
    <el-dialog
        top="10vh"
        class="video-play-dialog"
        :visible.sync="showVideoPlay"
        width="70%">
      <div style="width: 100%;height: 75vh">
        <video :src="previewVideoSrc" controls="controls" autoplay="autoplay" width="100%" height="100%" style="outline: none;"></video>
      </div>
    </el-dialog>

    <!--  消息发送邮件  -->
    <el-dialog
        top="20vh"
        class="chat-mail-dialog"
        :visible.sync="showChatMail"
        width="80%">
      <div class="chat-mail-dialog-body">
        <div class="chat-mail-dialog-body-left">
          <div :class="['chat-message-item', item.contentSource === 'CUSTOMER' ?  'customer' : 'profile']" v-for="(item,index) in mailMessageList" :key="index">
            <div class="message-wrapper">
              <div class="avatar-box">
                <el-image :src=" item.contentSource === 'CUSTOMER' ? customerDetail.photo : profileDetail.photo" alt="" />
                <div class="mail-message-time">
                  {{ item.createdDate | formatDate}}
                </div>
              </div>
              <div class="mail-right">
                <div class="mail-name">
                  {{ item.contentSource === 'CUSTOMER' ? customerDetail.name : profileDetail.name }}
                </div>
                <div class="mail-content" v-html="item.content"></div>
                <div class="mail-file-total" v-if="item.fileNum" @click="item.fileShow = !item.fileShow">
              <span>
                {{ item.fileNum }} Files Attached
              </span>
                </div>
                <div class="mail-file-list" v-if="item.fileShow">
                  <div :class="['mail-files photo']" v-for="(imageItem,index) in item.attachments.images" :key="imageItem.id">
                    <el-image
                        fit="cover"
                        style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                        :src="imageItem.urlThumbnail">
                    </el-image>
                    <div class="preview-btn" @click="openViewerForMailContent(index,item)">
                      {{ $t("preview") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chat-mail-dialog-body-right">
          <div class="footer-input-wrapper">
            <div class="picker-stick-list">
              <el-popover
                  popper-class="message-emojis-popover"
                  placement="bottom">
                <div class="message-emojis-list">
                  <div class="emojis-item"
                       @click="chatMailInputValue+=emojisItem.emoji"
                       v-for="emojisItem in emojisList">{{ emojisItem.emoji }}</div>
                </div>
                <div class="emoji-icon" slot="reference">
                  <img class="img emoji-popup svg-icon height_30px" src="~@/assets/emoji.svg" alt="">
                  <img class="img_hover emoji-popup svg-icon height_30px" src="~@/assets/emoji_active.svg" alt="">
                </div>
              </el-popover>
            </div>
            <el-input class="chat-input"
                      type="textarea"
                      v-model="chatMailInputValue"
                      show-word-limit
                      maxlength="300"
                      placeholder="Type something"></el-input>
          </div>
        </div>
        <div class="chat-mail-dialog-body-bottom">
          <div class="attach-file-btn" @click="handleOpenFileDialogForMail">
            {{ mailFileText }}
          </div>
          <div
              @click="handleSendMailForDialog"
              :class="['send-mail-btn', chatMailInputValue.trim().length >= 150 ? '' : 'disabled']">{{ $t('Send Mail') }}</div>
        </div>
      </div>
    </el-dialog>
    <!--  笔记  -->
    <el-dialog
        top="10vh"
        class="note-dialog"
        :visible.sync="noteDialog"
        width="58%">
      <div class="note-body">
        <div class="note-body-left">
          <el-input class="chat-input"
                    type="textarea"
                    v-model="noteInputValue"
                    placeholder="Type something"></el-input>
        </div>
        <div class="translate-btn" @click="handleSaveNote">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="note-body-right">
          <div class="note-item"
               v-for="item in noteList" :key="item.id">
            <div class="note-header">
              <div class="note-profile-avatar">
                <el-image :src="item.profilePhoto"></el-image>
              </div>
              <div class="note-profile-name">
                {{ item.profileName }}
              </div>
              <div class="note-time">
                {{ item.lastModifiedDate | formatTime }}
              </div>
              <div class="mote-del-icon" @click="handleDelNote(item)">
                <i class="el-icon-delete-solid"></i>
              </div>
            </div>
            <div class="note-content">
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
<!--  用户信息  -->
    <el-dialog
        top="10vh"
        class="userInfo-dialog"
        :visible.sync="userInfoDialog"
        width="70">
      <div class="userInfo-dialog-box">
        <div class="userInfo-dialog-left">
          <div class="userInfo-box">
            <div class="profile-avatar">
              <img class="avatar" :src="currentUserInfo.photo" alt="">
              <div class="profile-status">
                <div :class="['profile-status-value', currentUserInfo.online ? 'online' : 'offline']" ></div>
              </div>
            </div>
            <div class="userInfo-left">
              <div class="userInfo-name">{{ currentUserInfo.name }}</div>
              <div class="userInfo-date">{{ currentUserInfo.dateBirth }}</div>
              <div style="flex-grow: 1"></div>
              <div class="userInfo-country">
                <div class="userInfo-country-label">{{ currentUserInfo.country }}</div>
                <div class="userInfo-country-value">{{ currentUserInfo.city }}</div>
              </div>
              <div class="userInfo-country">
                <div class="userInfo-country-label">English</div>
                <div class="userInfo-country-value">{{ currentUserInfo.englishLevel }}</div>
              </div>
            </div>
            <div class="userInfo-id-box">
              <div class="userInfo-id">{{ currentUserInfo.no }}</div>
            </div>
          </div>
          <div class="userInfo-desc-box">
            <div class="userInfo-desc-title">
              {{ $t("Description") }}
            </div>
            <div class="userInfo-desc" v-for="desc in (currentUserInfo.description || '').split('\n\n')">
              {{ desc }}
            </div>
            <div class="userInfo-desc-title">
              {{ $t("Looking For") }}
            </div>
            <div class="userInfo-look-form" v-for="lookfor in currentUserInfo.lookFor">
              <div class="userInfo-look-form-key">
                {{ lookfor.key }}
              </div>
              <div class="userInfo-look-form-value">
                {{ lookfor.value }}
              </div>
            </div>
            <div class="userInfo-desc-title">
              {{ $t("Perfect partner") }}
            </div>
            <div class="userInfo-look-form" v-for="lookfor in currentUserInfo.preferences">
              <div class="userInfo-look-form-key">
                {{ lookfor.key }}
              </div>
              <div class="userInfo-look-form-value">
                {{ lookfor.value }}
              </div>
            </div>
          </div>
        </div>
        <div class="userInfo-dialog-right">
          <el-tabs class="file-tab" v-model="userInfoFileActive">
            <el-tab-pane label="" name="Photo">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Photo')}} {{ userInfoFileList.photo.length}}</span>
          </span>
              <div class="file-tab-content photo">
                <div :class="['file-media-item']" v-for="(item,index) in userInfoFileList.photo" :key="item.id">
                  <el-image
                      fit="cover"
                      style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                      :src="item.urlThumbnail">
                  </el-image>
                  <div class="preview-btn" @click="openViewerUserInfo(index)">
                    {{ $t("preview") }}
                  </div>
                  <img v-if="item.isPrivate" src="~@/assets/private_photo.svg" alt="" class="svg-icon height_30px private-media">
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="" name="Video">
              <span slot="label" class="file-tab-pane">
                <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
                <span class="file-tab-name">{{$t('Video')}} {{ userInfoFileList.video.length }}</span>
          </span>
              <div class="file-tab-content video">
                <div :class="['file-media-item']" v-for="(item,index) in userInfoFileList.video" :key="item.id">
                  <el-image
                      fit="cover"
                      style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                      :src="item.urlThumbnail">
                  </el-image>
                  <img v-if="item.isPrivate" src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px private-media">
                  <img @click="openVideoUserInfo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {formatDate, formatTime} from "@/utils";
import axios from "axios";
import {mapGetters} from "vuex";
import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
import Page from "@/views/page/index.vue";
import UploadFile from "@/components/UploadFile.vue";
let prevOverflow = '';

export default {
  name: "chat-panel",
  components: {
    Page,
    ImageViewer,
    UploadFile,
  },
  filters: {
    formatDate: formatDate,
    formatTime: formatTime
  },
  props: {
    profileId: String, // 账号ID
    customerId: String, // 客户ID
    type: String, // 聊天类型 CHAT MAIL
  },
  computed: {
    ...mapGetters(['userInfo']),
    checkedImageList() {
      const keys = ['photo']
      return this.getCheckedFileList(keys)
    },
    checkedFile() {
      // 优化 选中的文件数量
      const keys = ['photo', 'video', 'audio', 'sent']
      return this.getCheckedFileList(keys)
    },
    checkedFileNum() {
      return this.checkedFile.length
    },
    // 邮件状态下打开文件弹窗按钮文本
    mailFileText() {
      if (this.checkedFileNum) {
        return `File (${this.checkedFileNum})`
      } else {
        return 'Attach File'
      }
    }
  },
  data() {
    return {
      emojisList: [],
      stickerList: [],
      chatLimit: {
        messagesLeft: 0,
        lettersLeft: 0
      },
      customerDetail: {}, // 客户详情
      profileDetail: {}, // 账号详情
      msgInputValue: '',
      loading: false,
      messageList: [],
      mailMessageList: [],
      lastMessageId: undefined,
      fileDialog: false,
      mailFileDialog: false,
      fileTabActive: 'Photo',
      fileNum: {
        photo: 0,
        video: 0,
        audio: 0,
        sent: 0,
        moderation: 0,
      },
      fileList: {
        photo: [],
        video: [],
        audio: [],
        sent: [],
        moderation: [],
      },
      showViewer: false,
      initalIndex: 0,
      previewSrcList: [],
      showVideoPlay: false,
      previewVideoSrc: '',

      // 消息情况下发送邮件
      showChatMail: false,
      chatMailInputValue: '',
      mailHistoryList: [],
      // 笔记
      noteDialog: false,
      noteList: [],
      noteInputValue: '',
      // 用户信息
      userInfoDialog: false,
      currentUserInfo: {
        lookFor: [],
        preferences: []
      },
      userInfoFileActive: 'Photo',
      userInfoFileList: {
        photo: [],
        video: [],
      }
    }
  },
  watch: {
    fileList: {
      handler(val) {
        if (val.photo.filter(el => el.checked).length >= 6) {
          this.$message.warning(this.$t('You have reached attach limit'))
        }
        if (val.video.filter(el => el.checked).length >= 6) {
          this.$message.warning(this.$t('You have reached attach limit'))
        }
      },
      deep: true
    }
  },
  created() {
    axios.get('/emojis.json').then(res => {
      this.emojisList = res.data
    })
    this.$http.getStickers({
      profileId: this.profileId
    }).then(res => {
      let stickerList = []
      res.forEach(el => {
        stickerList = [...stickerList, ...el.stickers]
      })
      this.stickerList = stickerList
    })
  },
  methods: {
    initData() {
      this.getChatLimit()
      this.getDetail()
      this.getMessageList()
    },
    getChatLimit() {
      this.$http.getChatLimit({
        profileId: this.profileId,
        customerId: this.customerId,
      }).then(res => {
        this.chatLimit = res || {}
      })
    },
    // 获取客户详情
    getDetail() {
      this.$http.getCustomerInfo({
        profile: this.profileId,
        customerId: this.customerId
      }).then(res => {
        this.customerDetail = res
      })
      this.$http.getProfileInfo({
        profile: this.profileId,
      }).then(res => {
        this.profileDetail = res
      })
    },
    // 获取聊天记录
    getMessageList() {
      this.loading= true
      if (this.type === this.enumType.CHAT) {
        this.messageList = []
        this.$http.getChatMessageList({
          profile: this.profileId,
          customerId: this.customerId,
          lastMessageId: this.lastMessageId
        }).then(res => {
          this.messageList = res.messages
          this.lastMessageId = res.lastChatMessageId
          this.loading= false
        })
      } else {
        this.$http.getMailMessageList({
          profile: this.profileId,
          customerId: this.customerId,
          page: 1,
        }).then(res => {
          this.mailMessageList = res.messages.map(el => {
            return {
              ...el,
              fileShow: false,
              fileNum: el.attachments.images.length + el.attachments.videos.length + el.attachments.gifts.length
            }
          })
          this.loading= false
        })
      }
    },
    handleOpenNoteDialog() {
      this.noteDialog = true
      this.$http.getNoteList({
        profile: this.profileId,
        customerId: this.customerId
      }).then(res => {
        this.noteList = res
      })
    },
    handleSaveNote() {
      this.$http.addNote({
        profile: this.profileId,
        customerId: this.customerId,
        text: this.noteInputValue
      }).then(res => {
        this.noteInputValue = ''
        this.handleOpenNoteDialog()
      })
    },
    handleDelNote(item) {
      this.$http.deleteNote({
        id: item.id
      }).then(res => {
        this.$message.success(this.$t('Delete Success'))
        this.handleOpenNoteDialog()
      })
    },
    // 选中表情
    handleClickEmoji(emjo)  {
      this.msgInputValue+= emjo
    },
    // 发送消息
    handleSendMessage() {
      if (!this.msgInputValue.trim()) return
      this.$http.sendChatMessage({
        profileId: this.profileId,
        customerId: this.customerId,
        message: this.msgInputValue,
        customerMessageLength: 0,
        customerMessageCreatedDate: null,
        needsReminder: true,
        remainingLimits: this.chatLimit.chatLimits
      }).then(res => {
        this.msgInputValue = ''
        this.getMessageList()
        this.getChatLimit()
      })
    },
    // 发送邮件
    handleSendMail() {
      this.$http.sendMail({
        content: this.msgInputValue,
        customerId: this.customerId,
        profileId: this.profileId,
        images: this.getCheckedFileList(['photo']),
        videos: this.getCheckedFileList(['video']),
        remainingLimits: this.chatLimit.lettersLeft,
        subject: '',
        needsReminder: false
      }).then(res => {
        this.msgInputValue = ''
        this.getMessageList()
        this.getChatLimit()
      })
    },
    handleSendMailForDialog() {
      this.$http.sendMail({
        content: this.chatMailInputValue,
        customerId: this.customerId,
        profileId: this.profileId,
        images: this.getCheckedFileList(['photo']),
        videos: this.getCheckedFileList(['video']),
        remainingLimits: this.chatLimit.lettersLeft,
        subject: '',
        needsReminder: false
      }).then(res => {
        this.showChatMail = false
      })
    },
    // 发送贴纸
    handleClickSticker(data) {
      this.$http.sendSticker({
        profileId: this.profileId,
        customerId: this.customerId,
        idSticker: data.id,
        urlSticker: data.url,
      }).then(res => {
        this.getMessageList()
      })
    },
    // 打开文件选择框
    handleOpenFileDialog() {
      this.fileDialog = true
      this.$http.getProfileMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        mediaType: this.enumType.PHOTO,
        cursor: "",
        includeModerated: true,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.photo = res.media.map(el => {
          return {
            ...el,
            checked: false
          }
        })
      })
      this.$http.getProfileMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        mediaType: this.enumType.VIDEO,
        cursor: "",
        includeModerated: true,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.video = res.media.map(el => {
          return {
            ...el,
            checked: false
          }
        })
      })
      this.$http.getProfileMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        mediaType: this.enumType.AUDIO,
        cursor: "",
        includeModerated: true,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.audio = res.media.map(el => {
          return {
            ...el,
            checked: false
          }
        })
      })
      this.$http.getProfileSent({
        profileId: this.profileId,
        customerId: this.customerId,
        target: "CHAT"
      }).then(res => {
        this.fileList.sent = res.map(el => {
          return {
            ...el,
            checked: false
          }
        })
      })
    },
    // 打开邮件文件选择框
    handleOpenFileDialogForMail() {
      this.mailFileDialog = true
      this.$http.getProfileMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        mediaType: this.enumType.PHOTO,
        cursor: "",
        includeModerated: false,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.photo = res.media.map(el => {
          return {
            ...el,
            checked: !!this.checkedFile.find(item => item.id === el.id)
          }
        })
      })
      this.$http.getProfileMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        mediaType: this.enumType.VIDEO,
        cursor: "",
        includeModerated: false,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.video = res.media.map(el => {
          return {
            ...el,
            checked: !!this.checkedFile.find(item => item.id === el.id)
          }
        })
      })
      this.$http.getProfileSent({
        profileId: this.profileId,
        customerId: this.customerId,
        target: "MAIL"
      }).then(res => {
        this.fileList.sent = res.map(el => {
          return {
            ...el,
            checked: !!this.checkedFile.find(item => item.id === el.id)
          }
        })
      })
      this.fileList.audio = []
    },
    handleUploadSuccess(key) {
      if (key === 'chat') {
        this.handleOpenFileDialog()
      } else {
        this.handleOpenFileDialogForMail()
      }
    },
    handleCheckedImage(key, item) {
      item.checked = !item.checked
    },
    openViewer(index) {
      this.initalIndex = index
      this.previewSrcList = this.fileList[this.fileTabActive.toLowerCase()].map(el => el.url)
      this.showViewer = true
    },
    openViewerForMailContent(index, item) {
      this.initalIndex = index
      this.previewSrcList = item.attachments.images.map(el => el.url)
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    openVideo(item) {
      this.previewVideoSrc = item.url
      this.showVideoPlay = true
    },
    getCheckedFileList(keys, fileList = this.fileList) {
      let list = []
      keys.forEach(key => {
        list = [...list, ...fileList[key].filter(el => el.checked)]
      })
      return list
    },
    handleMarkSendMsg() {
      this.$http.sendMarkMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        targetType: this.enumType.CHAT,
        recover: false,
        mediaFiles: this.checkedFile
      }).then(res => {
        this.handleOpenFileDialog()
      })
    },
    handleMarkSendMail() {
      this.$http.sendMarkMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        targetType: this.enumType.MAIL,
        recover: false,
        mediaFiles: this.checkedFile
      }).then(res => {
        this.handleOpenFileDialog()
      })
    },
    handleRecover() {
      this.$http.sendMarkMedia({
        profileId: this.profileId,
        customerId: this.customerId,
        targetType: this.enumType.CHAT,
        recover: true,
        mediaFiles: this.checkedFile
      }).then(res => {
        this.handleOpenFileDialog()
      })
    },
    // 聊天发送文件
    handleSendFile() {
      // 图片视频分开发送
      const photoList = [
          ...this.fileList.photo.filter(el => el.checked),
          ...this.fileList.sent.filter(el => el.checked && el.mediaType === this.enumType.PHOTO)
      ]
      const videoList = [
        ...this.fileList.video.filter(el => el.checked),
        ...this.fileList.sent.filter(el => el.checked && el.mediaType === this.enumType.VIDEO)
      ]
      if (photoList.length) {
        this.$http.sendImage({
          profileId: this.profileId,
          customerId: this.customerId,
          mediaFiles: photoList
        })
      }
      if (videoList.length) {
        this.$http.sendVideo({
          profileId: this.profileId,
          customerId: this.customerId,
          mediaFiles: videoList
        })
      }
      this.fileDialog = false
    },
    // 选择文件
    handleAttachedFile() {
      this.mailFileDialog = false
    },
    handleOpenChatMail() {
      this.showChatMail = true
      this.$http.getMailMessageList({
        profile: this.profileId,
        customerId: this.customerId,
        page: 1,
      }).then(res => {
        this.mailMessageList = res.messages.map(el => {
          return {
            ...el,
            fileShow: false,
            fileNum: el.attachments.images.length + el.attachments.videos.length + el.attachments.gifts.length
          }
        })
        this.fileList = {
          photo: [],
          video: [],
          audio: [],
          sent: [],
          moderation: [],
        }
        this.chatMailInputValue = ''

      })
    },
    // 展示用户信息
    handleOpenUserInfoDialog(key) {
      this.userInfoDialog = true
      let targetId = ''
      if (key === 'customer') {
        targetId = this.customerId
        this.currentUserInfo = {
          ...this.customerDetail,
          no: this.customerId,
          lookFor: [
            {
              key: this.$t('Height'),
              value: this.customerDetail.height
            },
            {
              key: this.$t('Weight'),
              value: this.customerDetail.weight
            },
            {
              key: this.$t('Body type'),
              value: this.customerDetail.bodyType
            },
            {
              key: this.$t('Marital status'),
              value: this.customerDetail.maritalStatus
            },
            {
              key: this.$t('Children'),
              value: this.customerDetail.countChildren
            },
            {
              key: this.$t('Smoking'),
              value: this.customerDetail.smoking
            },
            {
              key: this.$t('Drinking'),
              value: this.customerDetail.drinking
            },
            {
              key: this.$t('Religion'),
              value: this.customerDetail.religion
            },
            {
              key: this.$t   ('Education'),
              value: this.customerDetail.education
            },
            {
              key: this.$t('Occupation'),
              value: this.customerDetail.occupation
            },
            {
              key: this.$t('Eye color'),
              value: this.customerDetail.eyeColor
            },
            {
              key: this.$t('Hair color'),
              value: this.customerDetail.hairColor
            }
          ],
          preferences: [
            {
              key: this.$t('Age'),
              value: this.customerDetail.preferences.ageFrom + '-' + this.customerDetail.preferences.ageTo
            },
            {
              key: this.$t('Height'),
              value: this.customerDetail.preferences.heightFrom + '-' + this.customerDetail.preferences.heightTo
            },
            {
              key: this.$t('Weight'),
              value: this.customerDetail.preferences.weightFrom + '-' + this.customerDetail.preferences.weightTo
            },
            {
              key: this.$t('Children'),
              value: 'Not specified'
            },
            {
              key: this.$t('Drinking'),
              value: 'Unknown'
            },
            {
              key: this.$t('Drinking'),
              value: 'Unknown'
            }
          ]
        }
      } else {
        targetId = this.profileId
        this.currentUserInfo = {
          ...this.profileDetail,
          no: this.profileId,
          lookFor: [
            {
              key: this.$t('Height'),
              value: this.profileDetail.height
            },
            {
              key: this.$t('Weight'),
              value: this.profileDetail.weight
            },
            {
              key: this.$t('Body type'),
              value: this.profileDetail.bodyType
            },
            {
              key: this.$t('Marital status'),
              value: this.profileDetail.maritalStatus
            },
            {
              key: this.$t('Children'),
              value: this.profileDetail.countChildren
            },
            {
              key: this.$t('Smoking'),
              value: this.profileDetail.smoking
            },
            {
              key: this.$t('Drinking'),
              value: this.profileDetail.drinking
            },
            {
              key: this.$t('Religion'),
              value: this.profileDetail.religion
            },
            {
              key: this.$t   ('Education'),
              value: this.profileDetail.education
            },
            {
              key: this.$t('Occupation'),
              value: this.profileDetail.occupation
            },
            {
              key: this.$t('Eye color'),
              value: this.profileDetail.eyeColor
            },
            {
              key: this.$t('Hair color'),
              value: this.profileDetail.hairColor
            }
          ],
          preferences: [
            {
              key: this.$t('Age'),
              value: this.profileDetail.preferences.ageFrom + '-' + this.profileDetail.preferences.ageTo
            },
            {
              key: this.$t('Height'),
              value: this.profileDetail.preferences.heightFrom + '-' + this.profileDetail.preferences.heightTo
            },
            {
              key: this.$t('Weight'),
              value: this.profileDetail.preferences.weightFrom + '-' + this.profileDetail.preferences.weightTo
            },
            {
              key: this.$t('Children'),
              value: 'Not specified'
            },
            {
              key: this.$t('Drinking'),
              value: 'Unknown'
            },
            {
              key: this.$t('Drinking'),
              value: 'Unknown'
            }


          ]
        }
      }
      this.$http.getCustomerOrProfileMedia({
        profileId: this.profileId,
        targetId
      }).then(res => {
        let mediaList = [
          ...(res.privateMedia || []).map(el => {
            return {
              ...el,
              isPrivate: true
            }
          }),
            ...(res.publicMedia || []).map(el => {
              return {
                ...el,
                isPrivate: false
              }
            })
        ]
        this.userInfoFileList.photo = mediaList.filter(el => el['@type'] === 'ImageDto')
        this.userInfoFileList.video = mediaList.filter(el => el['@type'] === 'VideoDto')
      })
    },
    openViewerUserInfo(index) {
      this.initalIndex = index
      this.previewSrcList = this.userInfoFileList[this.userInfoFileActive.toLowerCase()].map(el => el.url)
      this.showViewer = true
    },
    openVideoUserInfo(item) {
      this.previewVideoSrc = item.url
      this.showVideoPlay = true
    },
  }
}
</script>

<style lang="scss">
.chat-panel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .userInfo-dialog {
    .userInfo-dialog-box {
      display: grid;
      grid-template-columns: 1fr 1.8fr;
      height: 100%;
      overflow: hidden;
      .private-media {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
      }
      .userInfo-dialog-left {
        display: flex;
        flex-direction: column;
        min-width: 32.929rem;
        padding-right: 1rem;
        overflow: auto;
        border-right: 1px solid #314F67;
        background: #233645;
        .userInfo-box {
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 0.571rem;
          height: -moz-fit-content;
          height: fit-content;
          margin-bottom: 2rem;
          font-size: 1.14rem;
          .profile-avatar {
            position: relative;
            .avatar {
              width: 7.429rem;
              height: 7.429rem;
              border: 0.071rem solid #3C6382;
              border-radius: 0.571rem 0.571rem 0.786rem;
              object-fit: cover;
            }
            .profile-status {
              position: absolute;
              right: 0;
              bottom: 1px;
              width: 1rem;
              height: 1rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background: #0E222E;
              .profile-status-value {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 66%;
                height: 66%;
                cursor: pointer;
                border-radius: 50%;
              }
            }
          }
          .userInfo-left {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            > div{
              margin-bottom: 5px;
            }
            .userInfo-name {
              color: #dfdfdf;
              font-size: 1.429rem;
              font-weight: 700;
              line-height: 90%;
            }
            .userInfo-country{
              display: flex;
              align-items: center;
              .userInfo-country-label {
                font-size: 1.143rem;
                font-weight: 700;
              }
              .userInfo-country-value {
                margin-left: 10px;
              }
            }
          }
          .userInfo-id-box {
            margin-left: auto;
            .userInfo-id {
              padding: 0.2rem 1rem;
              border: 1px solid #2F677E;
              border-radius: 2rem;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

        }
        .userInfo-desc-box {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          .userInfo-desc-title {
            font-size: 1.714rem;
            font-weight: 700;
            margin: 1rem 0;
          }
          .userInfo-desc {
            font-size: 1rem;
            margin: 0.8rem 0;
          }
          .userInfo-look-form {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-gap: 1.1rem;
            font-size: .8rem;
            margin: 0.3rem 0;
          }
        }
      }
      .userInfo-dialog-right {
        display: flex;
        flex-flow: column;
        gap: 1.143rem;
        padding-left: 1.714rem;
        overflow-x: hidden;
        overflow-y: auto;
        color: #dfdfdf;
        background-color: #233645;
      }
    }
  }
  .el-dialog {
    .dialog-header {
      display: flex;
      justify-content: space-between;
      .dialog-send-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
        cursor: pointer;
        border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        outline: 1px solid #3C6382;
        letter-spacing: .01rem;
        width: min(calc(121 / 14 * 1rem),calc(121 / (1920 / 100) * 1vw));
        background-color: #2c5361;
        &:hover {
          background-color: #2c485f;
          transition-duration: .3s;
        }
      }
      .dialog-header-right {
        display: flex;
        align-items: center;
        gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        .box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          cursor: pointer;
          border-radius: 0.571rem;
          background-color: #122a3a;
          outline: 1px solid #2B4353;
          color: #d5d5d5;
          font-family: Inter,sans-serif;
          font-size: min(1.286rem, 0.938vw);
          &:hover {
            background-color: #2c485f;
            transition-duration: .3s;
          }
        }
      }
      .dialog-header-left {
        display: flex;
        gap: min(calc(48 / 14 * 1rem),2.5vw);
        align-items: center;
        height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
      }
      .profile-info {
        display: flex;
        gap: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
        align-items: center;
        letter-spacing: .01em;
        img {
          width: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
          height: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
          border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        }
      }
      .profile-name {
        color: #f1f1f1;
        max-width: min(calc(300 / 14 * 1rem),15.625vw);
        overflow: hidden;
        font-size: min(calc(12 / 14 * 1rem),calc(12 / (900 / 100) * 1vh));
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

    }
  }
  .file-tab {
    .file-tab-content {
      height: 65vh;
      overflow-y: auto;
      padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
      display: grid;
      grid-gap: min(calc(6 / 14 * 1rem),0.3125vw);
      align-content: flex-start;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill,min(calc(90 / 14 * 1rem),4.6875vw));
      width: 100%;
      overflow: initial;
      overflow: auto;
      .file-media-item {
        position: relative;
        display: flex;
        width: min(calc(90 / 14 * 1rem),4.6875vw);
        cursor: pointer;
        border-radius: min(calc(12 / 14 * 1rem),0.625vw);
        aspect-ratio: 2/3;
        .preview-btn {
          display: none;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
          cursor: pointer;
          border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          color: #67cae8;
          font-size: min(calc(12 / 14 * 1rem),.625vw);
          font-weight: 600;
          letter-spacing: .01rem;
          text-align: center;
          line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
          background: rgba(14,34,46,.88);
        }
        .selected-media {
          position: absolute;
          top: 0;
          right: -5%;
          display: none;
        }
        .video_play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
        &:hover {
          .preview-btn {
            display: block;
            transition: .2s ease-in-out;
          }
        }
        &.checked {
          .el-image {
            opacity: .3;
          }
          .selected-media {
            display: initial;
          }
        }
      }
    }
    .file-tab-content.sent {
      display: flex;
      flex-direction: column;
      gap: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
      padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      justify-content: initial;
      .mediaType {
        color: #f1f1f1;
        font-size: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
        letter-spacing: .01rem;
      }
    }
    .el-tabs__nav-wrap::after {
      background-color: #314F67;

    }
    .el-tabs__active-bar {
      background-color: #94f4ff;
    }
    .file-tab-pane {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      img {
        height: min(calc(17 / 14 * 1rem),calc(17 / (900 / 100) * 1vh));
      }
      .file-tab-name {
        margin-left: 0.8rem;
        color: #d5d5d5;
        font-family: Manrope,sans-serif;
        font-size: 1rem;
        font-weight: 400;
        font-style: normal;
        line-height: 150%;
      }
    }
  }

  .chat-mail-dialog {
    padding: 2.5vh;
    .el-dialog {
      overflow: hidden;
    }
    .chat-message-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 10%;
      max-width: 75%;
      margin: min(0.5rem,0.365vw) min(0.429rem,0.313vw);
      &.customer {
        align-self: flex-start !important;
      }
      &.profile {
        align-self: flex-end !important;
        .message-wrapper {
          flex-direction: row-reverse;
        }
        .message-right {
          .message-content {
            align-self: flex-end;
          }
          .message-time {
            margin-left: auto;
          }
        }
      }
      .message-wrapper{
        display: flex;
        gap: min(0.571rem,0.417vw);
        .avatar-box {
          display: flex;
          flex-direction: column;
          gap: 0.571rem;
          .el-image{
            align-self: start;
            width: 2.714rem;
            height: 2.714rem;
            border-radius: 0.571rem;
          }
          .mail-message-time {
            width: 2.714rem;
            color: #d5d5d5;
            font-size: .786rem;
            font-weight: 500;
            line-height: 100%;
          }
        }
      }
      .mail-right {
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: -moz-fit-content;
        height: fit-content;
        padding: 1.143rem;
        border-radius: 1.143rem 0.214rem 1.143rem 1.143rem;
        outline: 1px solid rgba(148,244,255,.2);
        background-color: #ffffff14;
        color: #c1c1c1;
        font-family: Inter,sans-serif;
        font-size: 1.071rem;
        font-weight: 400;
        font-style: normal;
        line-height: 150%;
        text-align: justify;
        .mail-name {
          font-family: Manrope,sans-serif;
          font-size: 1.071rem;
          font-weight: 700;
        }
        .mail-content {
          text-align: justify;
          word-break: break-all;
          margin-bottom: 5px;
        }
        .mail-file-total {
          display: inline;
          border-radius: 0.571rem;
          background-color: #2b4353;
          color: #7be6fb;
          font-size: .714rem;
          padding: 4px 5px;
          margin: 5px 0;
          cursor: pointer;
        }
        .mail-file-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0.5rem;
          .photo,
          .video{
            display: inline-block;
            width: 7.14rem;
            height: 7.14rem;
            margin-right: 0.5rem;
            border-radius: 0.36rem;
            position: relative;

            .preview-btn {
              display: none;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              cursor: pointer;
              border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
              color: #67cae8;
              font-size: min(calc(12 / 14 * 1rem),.625vw);
              font-weight: 600;
              letter-spacing: .01rem;
              text-align: center;
              line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              background: rgba(14,34,46,.88);
            }
            .video_play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
            &:hover {
              .preview-btn {
                display: block;
                transition: .2s ease-in-out;
              }
            }
          }
        }
      }
      .message-right {
        display: flex;
        flex-direction: column;
        gap: 0.286rem;
        color: #d5d5d5;
        .message-content {
          width: fit-content;
          line-height: 150%;
          text-align: justify;
          word-break: break-word;
          .photo-batch {
            display: flex;
            flex-flow: row wrap;
            gap: 0.5rem;
            justify-content: flex-end;
            background: 0;
          }
          .text-message,
          .like-wrapper,
          .newsfeed-like,
          .wink,
          .sticker,
          .virtual-gift,
          .post {
            padding: 1rem;
            border-radius: 1.143rem 1.143rem 1.143rem 0.214rem;
            background: rgba(255,255,255,.08);
            font-size: 1.071rem;
          }
          .sticker img {
            max-width: 4.86rem;
            max-height: 4.86rem;
          }
        }
        .message-time {
          opacity: .5;
          font-size: .786rem;
        }
      }

    }

    .chat-mail-dialog-body {
      width: 100%;
      height: 55vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      gap: 0.714rem;
      overflow: hidden;
      .chat-mail-dialog-body-left {
        height: 100%;
        border-radius: 1.07rem;
        background: linear-gradient(#0E222E,#102535);
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column-reverse;
      }
      .chat-mail-dialog-body-right {
        border-radius: 1.07rem;
        background: linear-gradient(#0E222E,#102535);
        position: relative;
        display: flex;
      }
      .chat-mail-dialog-body-bottom {
        display: flex;
        grid-column: 2/span2;
        grid-gap: 1rem;
        margin-right: 0.65rem;
        line-height: 150%;
        justify-self: end;
        .attach-file-btn {
          background: #122A3A;
          box-sizing: border-box;
          padding: 1.2vh 1.3vw;
          cursor: pointer;
          border: 0;
          border-radius: 0.571rem;
          color: #dfdfdf;
          font-size: 1rem;
          font-weight: 600;
          &:hover {
            background: #2c485f;
          }
        }
        .send-mail-btn {
          box-sizing: border-box;
          padding: 1.2vh 1.3vw;
          cursor: pointer;
          border: 0;
          border-radius: 0.571rem;
          color: #dfdfdf;
          font-size: 1rem;
          font-weight: 600;
          background: linear-gradient(0deg,#0E222E,#0E222E),#94F4FF;
          &.disabled {
            cursor: default;
            border-color: #354552;
            background: linear-gradient(0deg,#354552,#354552),#94F4FF;
            color: #848383d4;
          }
          // hover 不包含className为disabled
          &:hover:not(.disabled) {
            background: #2c485f;
          }
        }
      }
    }

    .footer-input-wrapper {
      display: flex;
      flex: 1 0 75%;
      gap: min(0.214rem,0.156vw);
      padding: min(0.714rem,0.521vw);
      .chat-input {
        .el-textarea__inner {
          height: 100%;
          background: transparent;
          border: none;
          color: #ffffff;
          font-size: 1.071rem;
          line-height: 150%;
          text-align: justify;
          line-break: anywhere;
          font-family: Manrope,sans-serif;
          padding: 0 !important;
          padding-left: 5px !important;
        }
        .el-input__count {
          left: 10px;
          right: initial;
          background: transparent;
          opacity: .2;
          color: #fff;
          font-family: Manrope,sans-serif;
          font-size: min(.714rem,.521vw);
          font-weight: 300;
        }
        .el-textarea__inner::placeholder {
          color: #6c757d;
          opacity: .75;
        }
      }
      .picker-stick-list {
        display: flex;
        flex: 0 0 min(2.143rem,1.563vw);
        flex-direction: column;
        gap: min(0.714rem,0.521vw);
      }
    }
    .emoji-icon {
      .img_hover {
        display: none;
      }
      .img {
        display: block;
      }
      &:hover {
        .img_hover {
          display: block;
        }
        .img {
          display: none;
        }
      }
    }
  }
  .note-dialog {
    .el-dialog {
      overflow: hidden;
    }
    .note-body {
      background: #233645!important;
      display: flex;
      gap: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
      align-items: center;
      width: 100%;
      height: 60vh;
    }
    .note-body-left {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      border-radius: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
      flex: 1 0 35%;
      padding: min(calc(24 / 14 * 1rem),1.25vw);
      background-color: #0e222e;
      .chat-input {
        height: 100%;
        .el-textarea__inner {
          padding: 0;
          height: 100%;
          background: transparent;
          border: none;
          color: #ffffff;
          font-size: 1.071rem;
          line-height: 150%;
          text-align: justify;
          line-break: anywhere;
          font-family: Manrope,sans-serif;
        }
        .el-input__count {
          left: 10px;
          right: initial;
          background: transparent;
          opacity: .2;
          color: #fff;
          font-family: Manrope,sans-serif;
          font-size: min(.714rem,.521vw);
          font-weight: 300;
        }
        .el-textarea__inner::placeholder {
          color: #6c757d;
          opacity: .75;
        }
      }

    }
    .translate-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(calc(40 / 14 * 1rem),calc(40 / (1920 / 100) * 1vw));
      height: min(calc(40 / 14 * 1rem),calc(40 / (1920 / 100) * 1vw));
      cursor: pointer;
      border-radius: 50%;
      background-color: #1c7292;
      color: #fff;
      font-size: min(calc(20 / 14 * 1rem),calc(20 / (1920 / 100) * 1vw));
    }
    .note-body-right {
      height: 100%;
      border-radius: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
      position: relative;
      flex: 1 0 50%;
      padding: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw)) min(0.5rem,calc(7 / (1920 / 100) * 1vw)) min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw)) min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
      overflow: hidden;
      background-color: #0e222e;
      .note-item {
        display: flex;
        flex-direction: column;
        gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        align-items: flex-start;
        width: 100%;
        height: -moz-fit-content;
        height: fit-content;
        padding: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        cursor: pointer;
        border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        background-color: transparent;
        color: #bfbfbf;
        font-family: Inter,sans-serif;
        &:hover {
          background-color: #2b4353;
        }
        .note-content {
          opacity: .5;
          font-size: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
          line-height: 150%;
          line-break: auto;
        }
        .note-header {
          display: flex;
          gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          align-items: center;
          width: 100%;
          .note-profile-avatar {
            width: min(calc(24 / 14 * 1rem),1.25vw);
            height: min(calc(24 / 14 * 1rem),1.25vw);
            border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw));
            overflow: hidden;
          }
          .note-profile-name {
            width: 50%;
            font-size: min(calc(12 / 14 * 1rem),.625vw);
            font-weight: 700;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .note-time {
            margin-left: auto;
            opacity: .6;
            font-size: min(1.1428571429rem, 0.8333333333vw);
          }
          .mote-del-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: min(calc(32 / 14 * 1rem),calc(32 / (1920 / 100) * 1vw));
            height: min(calc(32 / 14 * 1rem),calc(32 / (1920 / 100) * 1vw));
            border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
            background-color: #233645;
          }
        }
      }
    }
  }
  .chat-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    height: min(4.714rem,3.438vw);
    padding: min(0.929rem,0.677vw) min(0.571rem,0.417vw);
    border-radius: 1.143rem;
    background: #0E222E;
    .identity-wrapper {
      display: flex;
      gap: min(1.714rem,1.25vw);
      margin: 0 auto;
      .identity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(calc(198 / 14 * 1rem),10.3125vw);
        padding-right: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        border-radius: min(0.571rem,0.417vw);
        background-color: #07141d;
      }
      .user-info {
        display: flex;
        gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        .user-avatar {
          width: min(2.714rem,1.979vw);
          height: min(2.714rem,1.979vw);
          cursor: pointer;
          border-radius: 0.571rem;
          object-fit: cover;
        }
        .user-profile {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: min(5.357rem,3.906vw);
          height: 100%;
          padding: 2px 0;
          color: #c9c7c7;
          white-space: nowrap;
          .user-name {
            overflow: hidden;
            font-size: min(.857rem,.625vw);
            font-weight: 700;
            text-overflow: ellipsis;
          }
          .user-id {
            opacity: .5;
            font-size: min(.714rem,.521vw);
            font-weight: 300;
          }
        }
      }
    }
    .limits-wrapper {
      display: flex;
      gap: min(0.571rem,0.417vw);
      align-items: center;
      justify-content: center;
      margin-right: auto;
      padding: min(0.564rem,0.371vw) min(0.714rem,0.521vw);
      border-radius: 0.571rem;
      background-color: #122a3a;
      color: #44879d;
      font-size: min(1.286rem,.938vw);
      font-weight: 700;
      .line {
        width: 1px;
        height: 2.286rem;
        background-color: #628196;
        margin-inline: 0.429rem;
      }
      .limit-item {
        width: min(2rem,2vw);
        color: #bdeaff;
        text-align: center;
        img {
          width: 1.143rem;
          margin-bottom: auto;
          margin-inline: auto;
        }
        img.message {
          margin-bottom: 0.215rem;
        }
        img.mail {
          margin-bottom: 0.429rem;
        }
      }
    }
  }
  .chat-panel-body {
    position: relative;
    flex-grow: 1;
    //height: calc(100% - min(14.571rem,10.625vw) - min(4.714rem,3.438vw));
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;
    .chat-message-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 10%;
      max-width: 75%;
      margin: min(0.5rem,0.365vw) min(0.429rem,0.313vw);
      &.customer {
        align-self: flex-start !important;
      }
      &.profile {
        align-self: flex-end !important;
        .message-wrapper {
          flex-direction: row-reverse;
        }
        .message-right {
          .message-content {
            align-self: flex-end;
          }
          .message-time {
            margin-left: auto;
          }
        }
      }
      .message-wrapper{
        display: flex;
        gap: min(0.571rem,0.417vw);
        .avatar-box {
          display: flex;
          flex-direction: column;
          gap: 0.571rem;
          .el-image{
            align-self: start;
            width: 2.714rem;
            height: 2.714rem;
            border-radius: 0.571rem;
          }
          .mail-message-time {
            width: 2.714rem;
            color: #d5d5d5;
            font-size: .786rem;
            font-weight: 500;
            line-height: 100%;
          }
        }
      }
      .mail-right {
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: -moz-fit-content;
        height: fit-content;
        padding: 1.143rem;
        border-radius: 1.143rem 0.214rem 1.143rem 1.143rem;
        outline: 1px solid rgba(148,244,255,.2);
        background-color: #ffffff14;
        color: #c1c1c1;
        font-family: Inter,sans-serif;
        font-size: 1.071rem;
        font-weight: 400;
        font-style: normal;
        line-height: 150%;
        text-align: justify;
        .mail-name {
          font-family: Manrope,sans-serif;
          font-size: 1.071rem;
          font-weight: 700;
        }
        .mail-content {
          text-align: justify;
          word-break: break-all;
          margin-bottom: 5px;
        }
        .mail-file-total {
          display: inline;
          border-radius: 0.571rem;
          background-color: #2b4353;
          color: #7be6fb;
          font-size: .714rem;
          padding: 4px 5px;
          margin: 5px 0;
          cursor: pointer;
        }
        .mail-file-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0.5rem;
          .photo,
          .video{
            display: inline-block;
            width: 7.14rem;
            height: 7.14rem;
            margin-right: 0.5rem;
            border-radius: 0.36rem;
            position: relative;

            .preview-btn {
              display: none;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              cursor: pointer;
              border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
              color: #67cae8;
              font-size: min(calc(12 / 14 * 1rem),.625vw);
              font-weight: 600;
              letter-spacing: .01rem;
              text-align: center;
              line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              background: rgba(14,34,46,.88);
            }
            .video_play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
            &:hover {
              .preview-btn {
                display: block;
                transition: .2s ease-in-out;
              }
            }
          }
        }
      }
      .message-right {
        display: flex;
        flex-direction: column;
        gap: 0.286rem;
        color: #d5d5d5;
        .message-content {
          width: fit-content;
          line-height: 150%;
          text-align: justify;
          word-break: break-word;
          .photo-batch {
            display: flex;
            flex-flow: row wrap;
            gap: 0.5rem;
            justify-content: flex-end;
            background: 0;
          }
          .text-message,
          .like-wrapper,
          .newsfeed-like,
          .wink,
          .sticker,
          .virtual-gift,
          .post {
            padding: 1rem;
            border-radius: 1.143rem 1.143rem 1.143rem 0.214rem;
            background: rgba(255,255,255,.08);
            font-size: 1.071rem;
          }
          .sticker img {
            max-width: 4.86rem;
            max-height: 4.86rem;
          }
        }
        .message-time {
          opacity: .5;
          font-size: .786rem;
        }
      }

    }
  }
  .chat-panel-footer {
    flex-shrink: 0;
    display: flex;
    gap: min(1.143rem,0.833vw);
    height: min(14.571rem,10.625vw);
    .footer-input-wrapper {
      display: flex;
      flex: 1 0 75%;
      gap: min(0.214rem,0.156vw);
      padding: min(0.714rem,0.521vw);
      border-radius: min(1.143rem,0.833vw) min(0.286rem,0.208vw) min(1.143rem,0.833vw) min(1.143rem,0.833vw);
      background: #233645;
      .chat-input {
        .el-textarea__inner {
          height: 100%;
          background: transparent;
          border: none;
          color: #ffffff;
          font-size: 1.071rem;
          line-height: 150%;
          text-align: justify;
          line-break: anywhere;
          font-family: Manrope,sans-serif;
        }
        .el-input__count {
          left: 10px;
          right: initial;
          background: transparent;
          opacity: .2;
          color: #fff;
          font-family: Manrope,sans-serif;
          font-size: min(.714rem,.521vw);
          font-weight: 300;
        }
        .el-textarea__inner::placeholder {
          color: #6c757d;
          opacity: .75;
        }
      }
      .picker-stick-list {
        display: flex;
        flex: 0 0 min(2.143rem,1.563vw);
        flex-direction: column;
        gap: min(0.714rem,0.521vw);
      }
    }
    .emoji-icon {
      .img_hover {
        display: none;
      }
      .img {
        display: block;
      }
      &:hover {
        .img_hover {
          display: block;
        }
        .img {
          display: none;
        }
      }
    }
    .footer-buttons {
      display: flex;
      flex-direction: column;
      gap: min(0.571rem,0.417vw);
    }
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .image-item {
      width: 60px;
      padding: 5px;
    }
  }
}
</style>